<template>
  <view>
    <nav-bar title="个人中心" :showLeftIcon="false"></nav-bar>
    <view class="top-info">
      <view class="info-box">
        <view class="user-img">
          <image
            class="user-photo"
            :src="userInfo.userPhoto"
            mode="aspectFill"
          />
        </view>
        <view class="user-info">
          <view class="name-box">
            <view class="user-name">{{ userInfo.userName || '暂未登录' }}</view>
            <view class="label" v-if="userInfo" :style="{ background: statusConfig[userInfo.authentication].bgColor }">
              {{ statusConfig[userInfo.authentication].text }}
            </view>
          </view>
          <view class="user-id" v-if="userInfo">手机号:<text class="id">{{ userInfo.phoneNumber || '' }}</text></view>
        </view>
        <view class="edit-btn" @click="clickEditInfo">
          <image
            class="edit-icon"
            :src="baseIconUrl + '/commonIcon/icon_edit.png'"
            mode="aspectFill"
          />
          编辑资料
        </view>
      </view>
      <!-- 这个模块暂时不要 -->
      <!-- <view class="notice-box">
        <uni-icons class="notice-icon" type="sound-filled" color="#115BAA" size="18"></uni-icons>
        <view class="notice">{{ notice }}</view>
        <uni-icons type="closeempty" color="#999" size="18"></uni-icons>
      </view> -->
      <view class="number-box">
        <view class="number-item" v-for="(item, index) in numberList" :key="index" @click="clickCellItem(item)">
          <view class="number">{{ numberData[item.key] }}</view>
          <view class="label">{{ item.label }}</view>
        </view>
      </view>
    </view>
    <view class="cell-box">
      <view class="cell-item" v-for="(item, index) in cellConfig" :key="index" @click="clickCellItem(item)">
        <view class="label">{{ item.label }}</view>
        <view class="value">
          {{ cellData[item.key] || '' }}
          <uni-icons class="arrow-icon" type="right" color="#999" size="14"></uni-icons>
        </view>
      </view>
    </view>
    <view class="setting-item" @click="clickSetting">
      <view class="label">设置</view>
      <view class="value">
        <uni-icons class="arrow-icon" type="right" color="#999" size="14"></uni-icons>
      </view>
    </view>
    <tab-bar :selectedIndex="2"></tab-bar>
  </view>
</template>

<script>
  import { baseUrl, baseIconUrl } from '@/config'
  import api_physician from '@/api/physician.js'
  export default {
    name: 'PhysicianMine',
    data() {
      return {
        baseUrl,
        baseIconUrl,
        userInfo: null,
        notice: '请先完成资质认证才可开始执业哟~',
        statusConfig: {
          0: { text: '未认证', bgColor: '#ccc' },
          1: { text: '已认证', bgColor: '#FFBE3D' }
        },
        numberList: [
          { label: '我的患者', key: 'medicineCount', funcName: 'clickMyPatient' },
          { label: '训练计划', key: 'planCount', funcName: 'clickTrainPlan' },
          { label: '待办事项', key: 'unDealCount', funcName: 'clickMessage' }
        ],
        numberData: {},
        cellConfig: [
          { label: '我的资质', key: 'qualification', funcName: 'clickQualification' },
          { label: '我的擅长', key: '', funcName: 'clickProficient' },
          { label: '我的消息', key: 'newsCount', funcName: 'clickMessage' }
        ],
        cellData: {}
      }
    },
    onShow() {
      uni.hideTabBar()
      this.userInfo = uni.getStorageSync('allUserInfo')
      if (this.userInfo) {
        this.userInfo.authentication = this.userInfo.qualificationPhoto ? 1 : 0
        this.userInfo.userPhoto = this.userInfo.userPhoto ? this.userInfo.userPhoto.includes('http') ? this.userInfo.userPhoto : this.baseUrl + this.userInfo.userPhoto : ''
        this.cellData.qualification = this.userInfo.qualificationPhoto ? '已认证' : '未认证'
      }
      this.getNumber()
    },
    methods: {
      getNumber() {
        api_physician.fetchNumber().then(res => {
          if (res.code !== 200) return
          this.numberData = res.data
          this.cellData.newsCount = res.data.newsCount
        })
      },
      clickEditInfo() {
        uni.navigateTo({
          url: '/subPages/physicianMine/userInfo/editUserInfo'
        })
      },
      clickCellItem(item) {
        this[item.funcName]()
      },
      // 我的患者
      clickMyPatient() {
        uni.navigateTo({
          url: '/subPages/physicianTrainPlan/patient/myPatient'
        })
      },
      // 训练计划
      clickTrainPlan() {
        uni.reLaunch({
          url: '/pages/physicianTrainPlan'
        })
      },
      // 我的资质
      clickQualification() {
        uni.navigateTo({
          url: '/subPages/physicianMine/myResource/myQualification'
        })
      },
      // 我的擅长
      clickProficient() {
        uni.navigateTo({
          url: '/subPages/physicianMine/myResource/myProficient'
        })
      },
      // 消息通知
      clickMessage() {
        uni.navigateTo({
          url: '/subPages/physicianMine/myResource/messagePage'
        })
      },
      clickSetting() {
        uni.navigateTo({
          url: '/subPages/commonPage/settingPage/index'
        })
      }
    }
  }
</script>
<style lang="scss">
  .top-info {
    padding: 50rpx 30rpx 0;
    background: linear-gradient(to bottom, #5992e3, transparent);
    .info-box {
      display: flex;
      align-items: center;
      .user-img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 60rpx;
        overflow: hidden;
        .user-photo {
          width: 100%;
          height: 100%;
        }
      }
      .user-info {
        flex: 1;
        margin: 0 30rpx;
        .name-box {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          .user-name {
            flex: 1;
            margin-right: 10rpx;
            font-size: 36rpx;
            font-weight: 500;
            color: #FFF;
          }
          .label {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 40rpx;
            padding: 0 14rpx;
            border-radius: 20rpx;
            font-size: 24rpx;
            font-weight: 500;
            color: #FFF;
          }
        }
        .user-id {
          color: rgba(255, 255, 255, 0.7);
          .id {
            margin-left: 20rpx;
          }
        }
      }
      .edit-btn {
        display: flex;
        align-items: center;
        color: rgba(255, 255, 255, .7);
        .edit-icon {
          width: 32rpx;
          height: 32rpx;
          margin-right: 10rpx;
        }
      }
    }
    // 这个模块暂时不要
    // .notice-box {
    //   display: flex;
    //   align-items: center;
    //   height: 60rpx;
    //   margin: 30rpx 0;
    //   padding: 0 32rpx;
    //   border-radius: 30rpx;
    //   background: rgba(255, 255, 255, .6);
    //   .notice-icon {
    //     margin-right: 12rpx;
    //   }
    //   .notice {
    //     flex: 1;
    //   }
    // }
    .number-box {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 52rpx 0;
      margin-top: 30rpx;
      border-radius: 16rpx;
      background-color: #FFF;
      .number-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .number {
          font-size: 48rpx;
          font-weight: 500;
        }
        .label {
          font-size: 28rpx;
          font-weight: 500;
        }
      }
    }
  }
  .cell-box {
    margin: 28rpx 30rpx 30rpx;
    border-radius: 16rpx;
    background-color: #FFF;
    .cell-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 40rpx 30rpx;
      .label {
        font-weight: 500;
      }
      .value {
        color: #999;
      }
    }
  }
  .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 16rpx;
    padding: 40rpx 30rpx;
    margin: 0 30rpx;
    background-color: #FFF;
  }
</style>